<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Button, message } from 'ant-design-vue';

import { getRoomFacilityDetail, updateRoomFacility } from '#/api';
import { useRoomList } from '#/hooks/useRoomList';

import Facility from './components/Facility.vue';

const { roomList, fetchRoomList } = useRoomList();

const listJson = ref<any[]>([
  {
    id: '100',
    name: '热门设施',
    list: [
      {
        id: '101',
        name: '客房Wifi',
        key: 'isWifi',
      },
    ],
  },
  {
    id: '200',
    name: '洗漱用品',
    list: [
      {
        id: '201',
        name: '牙刷',
        key: 'isToothbrush',
      },
      {
        id: '202',
        name: '牙膏',
        key: 'isToothpaste',
      },
      {
        id: '203',
        name: '沐浴露',
        key: 'isShowerGel',
      },
      {
        id: '204',
        name: '洗发水',
        key: 'isShampoo',
      },
      {
        id: '205',
        name: '浴帽',
        key: 'isShowerCap',
      },
      {
        id: '206',
        name: '梳子',
        key: 'isComb',
      },
    ],
  },
  {
    id: '300',
    name: '客房设施',
    list: [
      {
        id: '301',
        name: '空调',
        key: 'isAirCondition',
      },
      {
        id: '302',
        name: '自动窗帘',
        key: 'isCurtain',
      },
      {
        id: '303',
        name: '床具:鸭绒被',
        key: 'isQuilt',
      },
      {
        id: '304',
        name: '床具:毯子或被子',
        key: 'isBlanket',
      },
    ],
  },
  {
    id: '400',
    name: '客房布局和家具',
    list: [
      {
        id: '401',
        name: '沙发',
        key: 'isSofa',
      },
      {
        id: '402',
        name: '衣柜/衣橱',
        key: 'isWardrobe',
      },
      {
        id: '403',
        name: '书桌',
        key: 'isDesk',
      },
      {
        id: '404',
        name: '餐桌',
        key: 'isDiningTable',
      },
      {
        id: '405',
        name: '挂墙装饰画/字画',
        key: 'isWallDecoration',
      },
    ],
  },
  {
    id: '500',
    name: '便利设施',
    list: [
      {
        id: '501',
        name: '衣架',
        key: 'isClothesRack',
      },
      {
        id: '502',
        name: '棋牌桌',
        key: 'isMahjongRoom',
      },
      {
        id: '503',
        name: '单一规格电源插座',
        key: 'isPowerSocket',
      },
      {
        id: '504',
        name: '220V电压插座',
        key: 'isPower220v',
      },
    ],
  },
  {
    id: '600',
    name: '网络与通讯',
    list: [
      {
        id: '601',
        name: '电话',
        key: 'isTelephone',
      },
    ],
  },
  {
    id: '700',
    name: '媒体科技',
    list: [
      {
        id: '701',
        name: '电视机',
        key: 'isTv',
      },
    ],
  },
  {
    id: '800',
    name: '食品饮品',
    list: [
      {
        id: '801',
        name: '茶包',
        key: 'isTeaBag',
      },
      {
        id: '802',
        name: '瓶装水',
        key: 'isBottledWater',
      },
      {
        id: '803',
        name: '电热水壶',
        key: 'isKettle',
      },
    ],
  },
  {
    id: '900',
    name: '卫浴设施',
    list: [
      {
        id: '901',
        name: '热水',
        key: 'isHotWater24h',
      },
      {
        id: '902',
        name: '浴室',
        key: 'isPrivateBathroom',
      },
      {
        id: '903',
        name: '卫生间',
        key: 'isBathroom',
      },
      {
        id: '904',
        name: '吹风机',
        key: 'isHairDryer',
      },
      {
        id: '905',
        name: '浴衣',
        key: 'isBathRobe',
      },
      {
        id: '906',
        name: '毛巾',
        key: 'isTowel',
      },
      {
        id: '907',
        name: '浴巾',
        key: 'isBathTowel',
      },
      {
        id: '908',
        name: '拖鞋',
        key: 'isSlippers',
      },
    ],
  },
]);
// 展开的面板id
const activeKey = ref(['100', '200']);

// 表单数据 0全部 -1无 其他数据为部分
const form = ref<any>({
  isWifi: [0], // isWifi
  isToothbrush: [0], // 牙刷
  isToothpaste: [0], // 牙膏
  isShowerGel: [0], // 沐浴露
  isShampoo: [0], // 洗发水
  isShowerCap: [0], // 浴帽
  isComb: [0], // 梳子
  isAirCondition: [0], // 空调
  isCurtain: [0], // 自动窗帘
  isQuilt: [0], // 鸭绒被
  isBlanket: [0], // 毯子或被子
  isSofa: [0], // 沙发
  isWardrobe: [0], // 衣柜/衣橱
  isDesk: [0], // 书桌
  isDiningTable: [0], // 餐桌
  isWallDecoration: [0], // 挂墙装饰画/字画
  isClothesRack: [0], // 衣架
  isMahjongRoom: [0], // 棋牌桌
  isPowerSocket: [0], // 单一规格电源插座
  isPower220v: [0], // 220V电压插座
  isTelephone: [0], // 电话
  isTv: [0], // 电视
  isTeaBag: [0], // 茶包
  isBottledWater: [0], // 瓶装水
  isKettle: [0], // 电热水壶
  isHotWater24h: [0], // 热水
  isPrivateBathroom: [0], // 浴室
  isBathroom: [0], // 卫生间
  isHairDryer: [0], // 吹风机
  isBathRobe: [0], // 浴衣
  isTowel: [0], // 毛巾
  isBathTowel: [0], // 浴巾
  isSlippers: [0], // 拖鞋
});

// 获取房型列表
const getList = async () => {
  try {
    const params = {
      enableStatus: true,
      name: '',
    };
    await fetchRoomList(params);
  } catch (error) {
    console.error('房型列表获取失败：', error);
  }
};

// 获取房型设施详情
const getDetail = async () => {
  try {
    const { data } = await getRoomFacilityDetail();
    form.value = data;
  } catch (error) {
    console.error('获取房型设施详情失败', error);
  }
};

// 保存事件
const submit = async () => {
  try {
    await updateRoomFacility(form.value);
    message.success('保存成功');
    getDetail();
  } catch (error) {
    console.error('保存房型设施失败', error);
  }
};

onMounted(() => {
  getList();
  getDetail();
});
</script>

<template>
  <div
    class="absolute bottom-0 right-0 flex h-[100%] w-[100%] flex-col overflow-hidden"
  >
    <div class="main overflow-auto p-4">
      <div class="mb-4 text-2xl font-bold">房型设施</div>
      <Facility
        v-for="item in listJson"
        :key="item.id"
        v-model:active-key="activeKey"
        v-model:form="form"
        :data="item"
        :room-list="roomList"
      />
    </div>
    <div class="card-box bottom-div rounded-none border-l-0 px-5 py-3">
      <Button class="w-[180px]" size="large" type="primary" @click="submit">
        <span>保存</span>
      </Button>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.bottom-div .ant-btn) {
  border-radius: 0;
}

:deep(.ant-checkbox .ant-checkbox-inner) {
  border-radius: 0;
}

.main {
  flex: 1;
}
</style>
